<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ page import="net.tanesha.recaptcha.ReCaptcha" %>
<%@ page import="net.tanesha.recaptcha.ReCaptchaFactory" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Rentpad Invites</title>
        <style>
            a {color:#404042;text-decoration:none;}      /* unvisited link */
            a:visited {color:#404042;}  /* visited link */
            a:hover {color:#404042;}  /* mouse over link */
            a:active {color:#404042;}  /* selected link */
            @font-face
            {
                font-family: avant;
                src: url('${model.props.appPath}/fonts/avangmi-webfont.ttf');
            }
        </style>
        <script type="text/javascript" src="${model.props.appPath}/js/jquery/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="${model.props.appPath}/js/token/jquery.tokeninput.js"></script> 
        <script type="text/javascript" src="${model.props.appPath}/js/block/jquery.blockUI.js"></script>
        <script type="text/javascript" src="${model.props.appPath}/js/google/analytics.js"></script>        
        <script type="text/javascript">            
            $(function() {
                $("#table-invites tr:even").css("background-color", "#ececec");
                initSubmitForm();
                
            });
            function initSubmitForm() {
                try {
                    $(function() {
                        $('.ghost').each(function(index) {// Adds the Ghost effect on textbox
                            if ($(this).val() === "" || $(this).val() === $(this).attr("title")) {
                                $(this).attr("value", $(this).attr("title")).css({"color": "#999"});
                            }
                        });
                        $('.ghost').on("focusin", function() {
                            if ($(this).val() === $(this).attr("title")) {
                                $(this).val("").css({"color": "#000000"});//Clear text and return normal color
                            }
                        }).focusout(function() {
                            if ($(this).val() === "") {//Nothing has changed
                                $(this).val($(this).attr("title")).css({"color": "#999"});//return back to ghost state
                            }
                        });
                    });
                } catch (e) {
                    alert(e)
                }
            }          
            function validateEmail(email) { 
                var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
                return re.test(email);
            } 
            function checkEmailExisting(email) {
                var existing = false;
                try {       
                    $.ajax({
                        type: 'POST',
                        url: "${model.props.appPath}/ws/invite.htm",
                        data: {
                            email: email,
                            a: 11000
                        },
                        timeout: 200000,
                        success: function(data) {
                            if (data.model.existing == 1) {
                                existing = true;
                            }
                        },
                        error : function(xhr, textStatus, errorThrown) { 
                            alert('error!');
                        }
                    });  
                }
                catch (e) {
                    alert(e);
                }
                return existing;
            }
            function submitInviteForm() {
                if (!$('#agree').is(":checked")) {
                    alert("Please check the checkbox to indicate that you agree to our terms & conditions and privacy statement.");
                    return;
                }
            
                var firstName = $("#text-invite-firstName").val();
                var lastName = $("#text-invite-lastName").val();
                var email = $("#text-invite-email").val();
                var password = $("#text-invite-password").val();
                var type = $("#text-invite-type").val();
                var area = $("#text-invite-area").val();
                                                
                if (firstName == 'Your first name') {
                    firstName = '';
                }
                if (lastName == 'Your last name') {
                    lastName = '';
                }
                if (email == 'Email address') {
                    email = '';
                }  
                if (password == 'And a password of your choice') {
                    password = '';
                }           
                if (password && password.length < 4) {
                    password = '';                    
                }
                
                try {
                    if (!firstName || !email) {
                        alert("Your name and email are required.");                        
                    }                     
                    if (!validateEmail(email)) {
                        alert("Please enter a valid email address.");  
                    }
                    else if (!password) {
                        alert("A password for your account is required to at least 4 characters long.");                        
                    }
                    else {                        
                        $("#submit-recaptcha").attr('disabled','disabled');
                        $.blockUI({ message: "<div style='font-family: Century Gothic, Calibri, Verdana; padding: 10px;'>Submitting Details ...</div>" });
                                            
                        $.ajax({
                            type: 'POST',
                            url: "${model.props.appPath}/ws/invite.htm",
                            data: {
                                firstName: firstName,
                                lastName: lastName,
                                email: email,
                                password: password,
                                type: type,
                                area: area,
                                a: 3,
                                recaptcha_challenge_field: $("input#recaptcha_challenge_field").val(),
                                recaptcha_response_field: $("input#recaptcha_response_field").val()
                            },
                            timeout: 200000,
                            success: function(data) {
                                $.unblockUI();
                                if (data.model.success) {
                                    alert("Success! We have recorded your details and you can now login to your account with the details that you put in. Have a great day!");
                                    $("#text-invite-firstName").val("");
                                    $("#text-invite-lastName").val("");
                                    $("#text-invite-email").val("");
                                    $("#text-invite-area").val("");
                                    $("#text-invite-type").val("");

                                    $("#text-invite-firstName").focusout();
                                    $("#text-invite-lastName").focusout();
                                    $("#text-invite-email").focusout();
                                    $("#text-invite-area").focusout();
                                    window.location="${model.props.appPath}/follow";
                                }    
                                else {
                                    alert("Oops! You did not enter the correct ReCaptcha code. Please try again.");
                                }
                                $("#submit-recaptcha").removeAttr('disabled');
                            },
                            error : function(xhr, textStatus, errorThrown) {
                                $.unblockUI();
                            }
                        });                        
                    }
                }
                catch (e) {
                    alert(e);
                }
            }            
        </script>
        
        <script>
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
            ga('create', 'UA-44197833-1', 'rentpad.com.ph');
            ga('send', 'pageview');
        </script>
        
        <script>            
            var RecaptchaOptions = {
                theme : 'clean'
            };
        </script>
        
    </head>

    <body style="text-align: center; background-color: #FAFAFA; color: #404042; font-family: avant, Century Gothic, Calibri, Verdana; padding: 0px; margin: 0px;">                

        <div style="margin-top: 0px; background-color: white;">

            <table cellpadding="0" cellspacing="0"style="width: 100%; margin-top: 0px; background-color: white; border-collapse: collapse;">
                <tr>
                    <td>                        
                        <%@include file="header.jsp" %>
                    </td>
                </tr>
                <tr>
                    <td>
                        
                        
            <div style="width: 100%; text-align: left; font-family: Century Gothic, Calibri, Verdana; color: #404042; background-color: white; background: url('${model.props.appPath}/img/content-bg-short.jpg'); background-repeat: repeat-x; display: block; position: relative; top: -2px;">

                <div style="width: 1100px; margin: 0 auto; text-align: center; border: 0px solid ">

                    <br>
                    <br>

                    <table cellpadding="5px" cellspacing="5px" style="font-size: 14px; text-align: left">
                        <tr>
                            <td>
                                <h1>Welcome to Rentpad!</h1>
                                
                                <hr><Br>
                                Here at Rentpad, you can post your <b>long term</b> and <b>short term</b> condos, apartments, houses or rooms that are for rent.  
                                    
                                <br>
                                <h3>So here's the cool suff:</h3>
                                <p>
                                <img src="${model.props.appPath}/img/check-green.jpg" /> <b>Worldwide reach</b> - Get your properties advertised for free to more renters from the Philippines and all over the world.
                                <br><br>
                                <img src="${model.props.appPath}/img/check-green.jpg" /> <b>Search Engine Optimized</b> - Properties on Rentpad shows up on Google, Yahoo, Bing and other Search Engines.
                                <br><br>
                                <img src="${model.props.appPath}/img/check-green.jpg" /> <b>Instant Online Presence</b> - Any business to date needs an online presence, and if you can leverage Rentpad for that, you'll gain a huge advantage over your competitors.                                
                                <br><br></p>
                                <p>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                ... and these you get for no charge at all. Cool huh? =)
                                </p>
                                
                                <img src="${model.props.appPath}/img/signup-1.jpg" style="max-width: 370px; margin-left: 30px;"/>
                              
                                <br> <br>  
                            </td>
                            
                            <td style="background-color: #f1f1f1; vertical-align: top;">
                                <br>
                                <table cellpadding="5" cellspacing='5' style="padding-left: 20px;">                                    
                                    <tr>
                                        <td><h2 style="color: darkorange">Start posting, get your free account now!</h2></td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <select id="text-invite-type" style="font-size:16px; padding:9px; width:470px;">
                                                <option value=""> (Pick one) I am a ... </option>
                                                <option value="Landlord">Landlord</option>
                                                <option value="Property Manager">Property Manager</option>
                                                <option value="Agent">Agent</option>
                                                <option value="Broker">Broker</option>
                                            </select>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><input id="text-invite-firstName" type="text" style="font-size:16px; padding:9px; width:450px;" class="ghost" id="text-invite-email" title="Your first name"/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><input id="text-invite-lastName" type="text" style="font-size:16px; padding:9px; width:450px;" class="ghost" id="text-invite-email" title="Your last name"/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <input id="text-invite-email" type="text" style="font-size:16px; padding:9px; width:450px;" class="ghost" id="text-invite-email" title="Email address"/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <input id="text-invite-password" type="text" style="font-size:16px; padding:9px; width:450px;" class="ghost" id="text-invite-email" title="And a password of your choice"/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="left">         
                                            <br>
                                            <span style="font-size: 13px;">Lastly, we just need to make sure you're human.</span>
                                            <br>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="left">                                            
                                            <%
                                              ReCaptcha c = ReCaptchaFactory.newReCaptcha("6LcJpegSAAAAAOa1UdcZkOxSbYRPAKeN9wHZdq3h", "6LcJpegSAAAAAJzGZN-OWFnq48drxH-vmu0zYHkE", false);
                                              out.print(c.createRecaptchaHtml(null, null));
                                            %>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="left" style="">

                                            <br>
                                            <input id="submit-recaptcha" type="button" value=" Get me an Account " style="font-size:16px; padding:5px; margin-left: 0px;" onclick='submitInviteForm()'/>
                                            <br>
                                            <div style="padding-top: 10px;">
                                                <input id="agree" type="checkbox" />I agree to <a href="${model.props.appPath}/rentpad-terms-and-conditions" style="color:#369" target="_blank">the terms & condtions</a> and <a href="${model.props.appPath}/rentpad-privacy-statement" style="color:#369" target="_blank">privacy statment</a>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="right">
                                            <br><br>
                                            Need help? email <span style="color: #369;">team@rentpad.me</span>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </div>

                <br><br>                

            </div>
                        
                    </td>
                </tr>
                
                <tr>
                    <td>
                        
            <div>
                        <%@include file="footer.jsp" %>
            </div>
                    </td>
                </tr>
            </table>


        </div>

    </body>

</html>
